<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
   
    </style>
</head>
<body>
<div id="app">

    <!-- <button type="" @click="getMySelectValue">get</button> -->

    <!-- 组件上的v-model -->

    <!-- 第一步：在子组件上v-model并且绑定对应变量 -->
    <my-select v-model="parentValue" ref="sel"></my-select>
    <input type="" v-model="parentValue" name="" value="">
    <h1>父组件的v-model{{parentValue}}</h1>
</div>

<script src="../20211018/vue.js"></script>
<script>
    // 子组件向父组件传递参数
    let myApp = new Vue({
        el: '#app',
        data: {
            parentValue: ''
        },
        methods: {
            // getMySelectValue () {

                // 危险方法
                // this.$refs.sel.selValue = '100'

                // 拿到对应组件的实例
                // console.log(this.$refs.sel)
                // console.log(this.$refs.sel.selValue)

            // }
        },


        components: {
            mySelect: {
                props: {
                    // 第三步：在子组件中使用value接收父组件传递过来的数据
                    // value是内置的props参数，无需重新注册
                    value: {
                        type: String
                    }
                },
                template: `
                    <div>
                        <select @change="selectChange($event)" v-model="selValue" name="" id="">
                            <option
                                v-for="item in options"
                                :value="item.value">
                                {{item.label}}
                            </option>
                        </select>

                        <h1>选择器的值是{{selValue}}</h1>
                    </div>
                `,
                data () {
                    return {
                        selValue: '',
                        options: [
                            {label: 'html', value: '1'},
                            {label: 'css', value: '2'},
                            {label: 'js', value: '3'},
                            {label: 'java', value: '4'},
                            {label: 'php', value: '5'},
                            {label: 'c#', value: '6'},
                            {label: 'c++', value: '7'},
                            {label: 'python', value: '8'}
                        ]
                    }
                },
                watch: {
                    // 第四步
                    // 监听value，将value获取到的最新值，赋值给子组件中绑定的变量值
                    value (newValue, oldValue) {
                        console.log('newValue', newValue)
                        console.log('oldValue', oldValue)

                        this.selValue = newValue
                    }
                },
                methods: {
                    selectChange (event) {
                        // event.target
                        console.log(event.target.value)

                        // 子组件传出去

                        // 第二步：在子组件中把数据传递出去
                        // vue会启用默认的input事件(内置事件),会自动注册到子组件的事件中
                        this.$emit('input', event.target.value)
                    }
                }
            }
        }
    })
</script>
</body>
</html>